<template>
	<div class="holle">
		<div class="n-nav">
			<nav>
				<p v-for="(list,index) in newsInfo" @click="getnews(index)" v-bind:class="{'active':typeindex==index}">{{list.newsType}}</p>
			</nav>
		</div>
		<div style="width: 100%;height: 0.9rem;"></div>
		<div class="n-news-show">
			<div class="news-list" v-for="(item, index) in newscontent" @click="topart(item.id)">
				<div class="img-news" v-if="item.type!=''">
					<span class="news-type">{{item.journalism_type}}</span>
					<img :src="item.journalism_img" />
				</div>
				<div class="news-title" v-if="item.type!=''">
					<div class="news-t-title">{{item.ournalism_title}}</div>
					<div class="news-t-content">
						{{item.journalism_content}}
					</div>
					<div class="news-t-time">{{item.journalism_time}}</div>
				</div>
			</div>
		</div>
		<myfooter></myfooter>
		<mynav></mynav>
	</div>
</template>

<script>
	import mynav from '@/components/houseList/public/mynav'
	import myfooter from '@/components/houseList/public/myfooter'
	export default {
		name: 'newInfo',
		data() {
			return {
				loading2: true,
				typeindex:0,
				mindex:0,
				newsInfo:[
					{
						newsType:"行业新闻",
					},{
						newsType:"蜗居新闻",
					},{
						newsType:"找房攻略",
					},{
						newsType:"办公风水",
					},{
						newsType:"办公绿植",
					},{
						newsType:"办公用品",
					},{
						newsType:"办公室装修",
					},{
						newsType:"媒体报道",
					},{
						newsType:"共享办公",
					}
				],
				length:"",
				newscontent:""
			}
		},
		mounted(){
			var _this = this;
			var data = {
				newstype : "行业新闻"
			}
			_this.axios.post(_this.ajaxUrls + '/api/News/newlist', _this.qs.stringify(data)).then(function(res) {
						/*修改图片路劲*/
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].journalism_img = _this.ajaxUrls + '/uploads/' + res.data[i].journalism_img  + '.jpg';
						}
						_this.newscontent = res.data;
					}).catch(function(err) {
						console.log(err);
					})

		},
		methods:{
			topart:function(newsid){
				this.$router.push({
					path: '/newsparticulars/' + newsid
				});
			},
			changeType:function(index,e){
				
			},
			getnews:function(data){
				this.typeindex = data;
				this.mindex = this.typeindex;
				var _this = this;
			var data = {
				newstype : this.newsInfo[data].newsType
			}
			_this.axios.post(_this.ajaxUrls + '/api/News/newlist', _this.qs.stringify(data)).then(function(res) {
						/*修改图片路劲*/
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].journalism_img = _this.ajaxUrls + '/uploads/' + res.data[i].journalism_img  + '.jpg';
						}
						_this.newscontent = res.data;
					}).catch(function(err) {
						console.log(err);
					})
			}
		},
		components:{
			myfooter,mynav
		}
	}
</script>

<style scoped>
	.news-type{
		display: inline-block;
		font-size: 0.16rem;
		background: rgba(0,0,0,0.3);
		color: #fff;
		padding: 0 0.05rem;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 0;
	}
	.news-t-time{
		font-size: 0.12rem;
		color: #999;
		text-align: right;
		padding-top: 0.1rem;
		box-sizing: border-box;
	}
	.news-t-content{
		width: 100%;
		height: 0.788rem;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.news-t-title{
		height: 0.5rem;
		padding-bottom: 0.1rem;
		box-sizing: border-box;
		font-size: 0.3rem;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.news-title{
		padding-left: 0.2rem;
		box-sizing: border-box;
		width: 5rem;
		height: 2.2rem;
		font-size: 0.25rem;
	}
	.img-news{
		width: 2.22rem;
		height: 1.6rem;
		position: relative;
	}
	.img-news img{
		width: 2.22rem;
		height: 1.6rem;
		box-shadow: 1px 1px 1px #888888;
	}
	.news-list{
		width: 100%;
		height: auto;
		display: flex;
		padding: 0.3rem 0.25rem 0 0.25rem;
		box-sizing: border-box;
		border-bottom: 0.01rem solid #e8e3e9;
	}
	.n-news-show{
		width: 100%;
		height: auto;
	}
	.n-nav {
		width: 100%;
		height: 0.9rem;
		line-height: 0.9rem;
		font-size: 0.25rem;
		overflow-y: hidden;
		margin: 0.1rem 0;
		position: fixed;
		top: -0.1rem;
		background: #fff;
		z-index: 99;
		border-bottom: 0.01rem solid #e8e3e9;
	}
	.n-nav .active{
		color: #f90;
	}
	nav{
		padding: 0 0.1rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: middle;
		-ms-flex-align: middle;
		align-items: middle;
		overflow: auto;
	}
	nav p{
		font-size: 0.25rem;
		text-align: center;
	    -ms-flex-negative: 0;
	    flex-shrink: 0;
	    margin: 0 0.1rem;
	    color: #545454;
	}
	nav span{
		font-size: 0.25rem;
		text-align: center;
	    -ms-flex-negative: 0;
	    flex-shrink: 0;
	    margin: 0 0.1rem;
	    color: #545454;
	}
</style>